<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="top-nav" th:fragment="topNav">
  <div class="container">
    <div>
      <span class="location-top fl iconfont mr5">&#xe60b;</span>
      <span class="fl mr420">上海</span>
    </div>
    <ul>
      <li><a th:href="@{/cart/showCart}">我的购物车</a></li>
      <li class="spacer">|</li>
      <li><a href="#">我的订单</a></li>
      <li class="spacer">|</li>
      <li th:if="${#strings.isEmpty(session.userInfo)}">
        <a th:href="@{/login.html}">你好,请登录</a>
        &nbsp;&nbsp;
        <a th:href="@{/user/regView(flag=2)}" class="free-login">免费注册</a>
      </li>
      <li th:if="${!#strings.isEmpty(session.userInfo)}">
        欢迎您 :<span th:text="${session.userInfo.account}"></span> &nbsp;
        <a th:href="@{/user/logout}" class="free-login">退出登录</a>
      </li>
    </ul>
  </div>
</div>


<div class="head" th:fragment="headerNav">
  <div class="container">
    <!-- ============= logo ============= -->
    <div class="logo fl">
      <h1>
        <a class="hot-word">蜗牛学苑</a>
      </h1>
    </div>
    <!-- ============= 搜索框部份 ============= -->
    <div class="search fl ml100" >
      <div class="up">

        <div class="search-box fl mr18">
          <input class="fl" id="searchBook" type="text" name="bname" onkeyup="this.style.color='black'" th:value="${bname}" placeholder="请输入关键词" />
          <span class="photo">&#xe663;</span>
          <span class="search-icon fl" onclick="searchBook()">&#xe660;</span>

          <script>
            function searchBook(){
              alert(555);
              let name = $("#searchBook").val();
              alert(name);
              location.href = "../book/showBook?bname="+name;
            }
          </script>

        </div>

        <div class="cart fl">
          <span class="iconfont">&#xe622;</span>
          <a th:href="@{/cart/showCart}">我的购物车</a>
          <i class="num">0</i>
        </div>
      </div>

      <div class="navitems">
        <ol>
          <li><a th:class="${typeId == 0 ?'red-and-weight':''}" th:href="@{/book/showBook(id=0)}">全部</a></li>
          <li  th:class="${t.id == typeId?'red-and-weight':''}"  th:each="t :${typeList}"><a th:href="@{/book/showBook(id=${t.id})}"  th:text="${t.name}">优惠券</a></li>
        </ol>
      </div>
    </div>
  </div>
</div>

<div class="container-fluid" id="footer" th:fragment="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <dl>
          <dt><b>热线电话</b></dt>
          <dd id="tel"><i>020-000000</i></dd>
          <dd class="openDate">周一至周五9:00-21:00</dd>
          <dd class="openDate">周六至周日9:00-17:30</dd>
          <dd><a href="#">在线客服</a></dd>
        </dl>
      </div>
      <div class="col-md-2">
        <dl>
          <dt><b>服务保障</b></dt>
          <dd><a href="#">正品保证</a></dd>
          <dd><a href="#">7天无理由退换</a></dd>
          <dd><a href="#">退货返运费</a></dd>
          <dd><a href="#">7X15小时客户服务</a></dd>
        </dl>
      </div>
      <div class="col-md-2">
        <dl>
          <dt><b>支付方式</b></dt>
          <dd><a href="#">公司转账</a></dd>
          <dd><a href="#">货到付款</a></dd>
          <dd><a href="#">在线支付</a></dd>
          <dd><a href="#">分期付款</a></dd>
        </dl>
      </div>
      <div class="col-md-2">
        <dl>
          <dt><b>商家服务</b></dt>
          <dd><a href="#">商家信息</a></dd>
          <dd><a href="#">培训中心</a></dd>
          <dd><a href="#">广告服务</a></dd>
          <dd><a href="#">服务市场</a></dd>
        </dl>
      </div>
      <div class="col-md-2">
        <dl>
          <dt><b>物流配送</b></dt>
          <dd><a href="#">免运费</a></dd>
          <dd><a href="#">海外配送</a></dd>
          <dd><a href="#">EMS</a></dd>
          <dd><a href="#">211限时达</a></dd>
        </dl>
      </div>
      <div class="col-md-2">
        <dl>
          <dt><b>关注我们</b></dt>
          <img th:src="@{/asserts/img/code.png}">
        </dl>
      </div>
    </div>

  </div>
</div>




</body>
</html>